<template>
  <div class="account-settlement-container">
    <!-- 左侧树形结构区域 -->
    <div class="left-tree-panel">
      <div class="tree-header">
        <h4>
          <i class="el-icon-office-building"></i>
          楼栋用房分类
        </h4>
      </div>
      <div class="tree-search">
        <el-input 
          v-model="treeSearchText" 
          placeholder="请输入楼栋内容" 
          size="small" 
          clearable>
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <div class="tree-container">
        <el-tree
          :data="treeData"
          :props="treeProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          :expand-on-click-node="false"
          :default-expand-all="true"
          :highlight-current="true"
          @node-click="handleNodeClick"
          class="custom-tree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="tree-node-label">
              <i :class="getNodeIcon(data)" class="tree-node-icon"></i>
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="right-content-panel">
      <div class="account-settlement">
        <!-- Tab切换 -->
        <div class="tab-container">
          <el-tabs v-model="activeTab" @tab-click="handleTabClick" class="custom-tabs">
            <el-tab-pane label="销户" name="account-closure">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-user-solid"></i>
                  销户
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="销电表" name="meter-closure">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-lightning"></i>
                  销电表
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="销水表" name="water-closure">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-water-cup"></i>
                  销水表
                </span>
              </template>
            </el-tab-pane>
            <el-tab-pane label="销流体表" name="fluid-closure">
              <template slot="label">
                <span class="tab-label">
                  <i class="el-icon-dish"></i>
                  销流体表
                </span>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 销户操作区 -->
        <div class="settlement-container">
          <div class="settlement-header">
            <h3>
              <i class="el-icon-user"></i>
              销户操作
            </h3>
          </div>
          <!-- 租户信息 -->
          <div class="tenant-info-section">
            <div class="info-card">
              <div class="card-header">
                <div class="tenant-basic">
                  <div class="tenant-icon">
                    <i class="el-icon-house"></i>
                  </div>
                  <div class="tenant-details">
                    <div class="room-info">
                      <span class="room-label">房间信息</span>
                      <div class="room-number">{{ selectedTenant ? selectedTenant.roomInfo : '请选择房间' }}</div>
                    </div>
                    <div class="owner-info">
                      <span class="owner-icon">
                        <i class="el-icon-user-solid"></i>
                      </span>
                      <span class="owner-label">业主</span>
                      <span class="owner-name">{{ selectedTenant ? selectedTenant.ownerName : 'N/A' }}</span>
                    </div>
                    <div class="balance-info">
                      <span class="balance-icon">
                        <i class="el-icon-money"></i>
                      </span>
                      <span class="balance-label">账户余额</span>
                      <div class="balance-amount">
                        <span class="amount">{{ selectedTenant ? selectedTenant.balance : 0 }}</span>
                        <span class="unit">元</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 电表信息 -->
          <div class="meter-info-section">
            <div class="meter-cards">
              <div class="meter-card" v-for="(meter, index) in meterData" :key="index">
                <div class="meter-header">
                  <div class="meter-icon">
                    <i class="el-icon-lightning"></i>
                  </div>
                  <div class="meter-basic">
                    <div class="meter-number">
                      <span class="label">电表表号:</span>
                      <span class="value">{{ meter.meterNumber }}</span>
                      <el-tag size="mini" :type="meter.status === '合闸' ? 'success' : 'danger'">{{ meter.status }}</el-tag>
                    </div>
                    <div class="meter-time">
                      <span class="label">抄读时间:</span>
                      <span class="value">{{ meter.readTime }}</span>
                    </div>
                  </div>
                </div>
                <div class="meter-readings">
                  <div class="reading-item">
                    <span class="reading-label">本次抄表读数(Kwh)</span>
                    <div class="reading-value">{{ meter.currentReading }}</div>
                  </div>
                  <div class="reading-item">
                    <span class="reading-label">本上次抄表读数(Kwh)</span>
                    <div class="reading-value">{{ meter.lastReading }}</div>
                  </div>
                  <div class="reading-item">
                    <span class="reading-label">用电量(Kwh)</span>
                    <div class="reading-value">{{ meter.consumption }}</div>
                  </div>
                </div>
                <div class="meter-actions">
                  <el-button 
                    type="primary" 
                    size="small" 
                    icon="el-icon-reading"
                    @click="readMeter(meter)"
                  >
                    抄表
                  </el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 结算信息 -->
          <div class="settlement-info">
            <div class="settlement-warning">
              <el-alert
                title="销户(销户前请先手动抄表操作，一旦销户，将不可退费，请谨慎操作!)"
                type="warning"
                :closable="false"
                show-icon
              >
              </el-alert>
            </div>
            <div class="settlement-summary">
              <div class="summary-item">
                <span class="summary-label">结算后账户余额:</span>
                <span class="summary-value final-balance">{{ selectedTenant ? selectedTenant.balance : 0 }} 元 (家庭备用金余额)</span>
              </div>
            </div>
            <div class="settlement-actions">
              <el-button 
                type="info" 
                icon="el-icon-close"
                @click="cancelSettlement"
              >
                取消
              </el-button>
              <el-button 
                type="danger" 
                icon="el-icon-check"
                @click="confirmSettlement"
                :loading="settling"
              >
                {{ settling ? '销户中...' : '销户' }}
              </el-button>
            </div>
          </div>
        </div>
        <!-- 抄表弹窗 -->
        <el-dialog
          title="手动抄表"
          :visible.sync="showMeterDialog"
          width="500px"
          class="custom-dialog"
          :close-on-click-modal="false"
        >
          <div class="meter-dialog-content">
            <el-form :model="meterForm" label-width="120px" class="meter-form">
              <el-form-item label="电表表号:">
                <el-input 
                  v-model="meterForm.meterNumber" 
                  disabled
                  class="form-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="当前读数:">
                <el-input 
                  v-model="meterForm.currentReading" 
                  type="number"
                  placeholder="请输入当前读数"
                  class="form-input"
                ></el-input>
              </el-form-item>
              <el-form-item label="抄表时间:">
                <el-date-picker
                  v-model="meterForm.readTime"
                  type="datetime"
                  placeholder="选择抄表时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="form-input"
                ></el-date-picker>
              </el-form-item>
              <el-form-item label="备注:">
                <el-input 
                  v-model="meterForm.remark" 
                  type="textarea"
                  :rows="3"
                  placeholder="请输入备注信息"
                  class="form-input"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showMeterDialog = false">取消</el-button>
            <el-button 
              type="primary" 
              @click="confirmMeterReading"
              :loading="reading"
            >
              {{ reading ? '抄表中...' : '确认抄表' }}
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'AccountSettlement',
  data() {
    return {
      // 树形结构相关
      treeSearchText: '',
      treeData: [],
      selectedNode: null,
      treeProps: {
        children: 'children',
        label: 'label'
      },
      activeTab: 'account-closure',
      settling: false,
      reading: false,
      showMeterDialog: false,
      selectedMeter: null,
      selectedTenant: null, // 新增，用于存储选中的租户信息
      meterData: [
        {
          meterNumber: '122342342431549',
          readTime: '2024-05-11 15:32:00',
          currentReading: '1.8000',
          lastReading: '1.8000',
          consumption: '0.000',
          status: '合闸'
        },
        {
          meterNumber: '122342342431549',
          readTime: '2024-05-11 15:32:00',
          currentReading: '1.8000',
          lastReading: '1.8000',
          consumption: '0.000',
          status: '合闸'
        },
        {
          meterNumber: '122342342431549',
          readTime: '2024-05-11 15:32:00',
          currentReading: '1.8000',
          lastReading: '1.8000',
          consumption: '0.000',
          status: '合闸'
        }
      ],
      meterForm: {
        meterNumber: '',
        currentReading: '',
        readTime: '',
        remark: ''
      }
    }
  },
  watch: {
    treeSearchText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.loadTreeData()
    // 初始加载一个默认租户信息，或者等待用户选择
    this.selectedTenant = {
      roomInfo: '社区_01_xx用户-101',
      ownerName: '李明',
      balance: 110.2
    }
  },
  methods: {
    // 加载树形结构数据 - 使用mock数据
    loadTreeData() {
      // 直接使用mock数据，避免API请求
      this.treeData = [
        {
          id: 1,
          label: '楼栋用房分类',
          children: [
            {
              id: 2,
              label: '宿舍',
              children: [
                {
                  id: 3,
                  label: 'A栋',
                  children: [
                    { id: 4, label: '101', roomId: 101, buildingId: 3, roomInfo: '社区_01_xx用户-101', ownerName: '李明', balance: 110.2 },
                    { id: 5, label: '102', roomId: 102, buildingId: 3, roomInfo: '社区_01_xx用户-102', ownerName: '张三', balance: 50.5 },
                    { id: 6, label: '103', roomId: 103, buildingId: 3, roomInfo: '社区_01_xx用户-103', ownerName: '王五', balance: 200.0 },
                    { id: 7, label: '104', roomId: 104, buildingId: 3, roomInfo: '社区_01_xx用户-104', ownerName: '赵六', balance: 75.8 }
                  ]
                }
              ]
            },
            {
              id: 8,
              label: '二层',
              children: [
                {
                  id: 9,
                  label: 'B栋',
                  children: [
                    { id: 10, label: '201', roomId: 201, buildingId: 9, roomInfo: '社区_01_xx用户-201', ownerName: '钱七', balance: 30.0 },
                    { id: 11, label: '202', roomId: 202, buildingId: 9, roomInfo: '社区_01_xx用户-202', ownerName: '孙八', balance: 150.0 },
                    { id: 12, label: '203', roomId: 203, buildingId: 9, roomInfo: '社区_01_xx用户-203', ownerName: '周九', balance: 90.0 }
                  ]
                }
              ]
            }
          ]
        }
      ]
    },
    
    // 树形结构过滤方法
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    
    // 树形节点点击事件
    handleNodeClick(data) {
      console.log('选中节点:', data)
      this.selectedNode = data
      // 如果点击的是房间号，则更新租户信息
      if (data.roomId) {
        this.selectedTenant = {
          roomInfo: data.roomInfo,
          ownerName: data.ownerName,
          balance: data.balance
        }
      } else {
        // 如果点击的是非房间节点，可以清空或显示默认信息
        this.selectedTenant = null
      }
    },
    
    // 获取节点图标
    getNodeIcon(data) {
      if (data.roomId) {
        return 'el-icon-house'
      } else if (data.buildingId) {
        return 'el-icon-office-building'
      } else if (data.children && data.children.length > 0) {
        return 'el-icon-folder-opened'
      } else {
        return 'el-icon-folder'
      }
    },
    handleTabClick(tab) {
      console.log('切换到:', tab.name)
    },
    readMeter(meter) {
      this.selectedMeter = meter
      this.meterForm = {
        meterNumber: meter.meterNumber,
        currentReading: meter.currentReading,
        readTime: meter.readTime,
        remark: ''
      }
      this.showMeterDialog = true
    },
    confirmMeterReading() {
      if (!this.meterForm.currentReading) {
        this.$message.warning('请输入当前读数')
        return
      }
      this.reading = true
      setTimeout(() => {
        // 更新表数据
        if (this.selectedMeter) {
          this.selectedMeter.currentReading = this.meterForm.currentReading
          this.selectedMeter.readTime = this.meterForm.readTime
          this.selectedMeter.consumption = (
            parseFloat(this.meterForm.currentReading) - 
            parseFloat(this.selectedMeter.lastReading)
          ).toFixed(3)
        }
        this.$message.success('抄表成功')
        this.reading = false
        this.showMeterDialog = false
      }, 1000)
    },
    cancelSettlement() {
      this.$router.go(-1)
    },
    confirmSettlement() {
      this.$confirm('确认要销户吗？销户后将无法恢复，请谨慎操作！', '销户确认', {
        confirmButtonText: '确认销户',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.settling = true
        setTimeout(() => {
          this.$message.success('销户成功')
          this.settling = false
          // 可以跳转到其他页面或刷新数据
        }, 2000)
      }).catch(() => {
        this.$message.info('已取消销户')
      })
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.account-settlement-container {
  display: flex;
  height: calc(100vh - 120px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 左侧树形结构面板 */
.left-tree-panel {
  width: 300px;
  background: white;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 0 24px 24px;
}

.tree-header {
  padding: 20px 20px 0;
  border-bottom: 1px solid #e9ecef;
}

.tree-header h4 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-header h4 i {
  color: #3498db;
  font-size: 18px;
}

.tree-search {
  padding: 20px;
  border-bottom: 1px solid #e9ecef;
}

.tree-container {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.custom-tree {
  background: transparent;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-right: 8px;
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tree-node-icon {
  color: #3498db;
  font-size: 16px;
}

/* 右侧内容面板 */
.right-content-panel {
  flex: 1;
  background: white;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  margin: 24px 24px 24px 0;
  padding: 24px;
}

/* 原有的 account-settlement 样式调整 */
.account-settlement {
  padding: 0;
  background: none;
  min-height: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab容器 */
.tab-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  overflow: hidden;
}
.custom-tabs {
  padding: 0 24px;
}
.tab-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
/* 结算容器 */
.settlement-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.settlement-header {
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.settlement-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settlement-header h3 i {
  color: #e74c3c;
}
/* 租户信息区 */
.tenant-info-section {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
}
.info-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 24px;
}
.tenant-basic {
  display: flex;
  align-items: center;
  gap: 20px;
}
.tenant-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
}
.tenant-details {
  flex: 1;
  display: flex;
  gap: 40px;
  align-items: center;
}
.room-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.room-label {
  color: #6c757d;
  font-size: 14px;
}
.room-number {
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}
.owner-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.owner-icon {
  color: #f39c12;
  font-size: 16px;
}
.owner-label {
  color: #6c757d;
  font-size: 14px;
}
.owner-name {
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}
.balance-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.balance-icon {
  color: #27ae60;
  font-size: 16px;
}
.balance-label {
  color: #6c757d;
  font-size: 14px;
}
.balance-amount {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.amount {
  color: #e74c3c;
  font-size: 20px;
  font-weight: 600;
}
.unit {
  color: #6c757d;
  font-size: 14px;
}
/* 电表信息区 */
.meter-info-section {
  padding: 24px;
  border-bottom: 1px solid #e9ecef;
}
.meter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}
.meter-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
}
.meter-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.meter-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e67e22;
  font-size: 18px;
}
.meter-basic {
  flex: 1;
}
.meter-number {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.meter-number .label {
  color: #6c757d;
  font-size: 14px;
}
.meter-number .value {
  color: #2c3e50;
  font-weight: 600;
}
.meter-time {
  display: flex;
  align-items: center;
  gap: 8px;
}
.meter-time .label {
  color: #6c757d;
  font-size: 12px;
}
.meter-time .value {
  color: #6c757d;
  font-size: 12px;
}
.meter-readings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.reading-item {
  text-align: center;
}
.reading-label {
  display: block;
  color: #6c757d;
  font-size: 12px;
  margin-bottom: 8px;
}
.reading-value {
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}
.meter-actions {
  text-align: center;
}
/* 结算信息区 */
.settlement-info {
  padding: 24px;
}
.settlement-warning {
  margin-bottom: 24px;
}
.settlement-summary {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}
.summary-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.summary-label {
  color: #6c757d;
  font-size: 16px;
}
.summary-value {
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}
.final-balance {
  color: #e74c3c;
}
.settlement-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}
.settlement-actions .el-button {
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 500;
}
/* 抄表弹窗样式 */
.meter-dialog-content {
  padding: 20px;
}
.meter-form .form-input {
  width: 100%;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .account-settlement {
    padding: 16px;
  }
  .tenant-basic {
    flex-direction: column;
    text-align: center;
  }
  .tenant-details {
    flex-direction: column;
    gap: 16px;
  }
  .meter-cards {
    grid-template-columns: 1fr;
  }
  .meter-readings {
    grid-template-columns: 1fr;
  }
  .summary-item {
    flex-direction: column;
    gap: 8px;
  }
  .settlement-actions {
    flex-direction: column;
  }
}
</style>


